<template>
  <div class="file-list">
    <template v-for="(item, index) in list" :key="index">
      <div class="file-item">
        <img class="file-logo" :src="methods.nameToLogo(item[nameKey])" />
        <div class="file-name">{{ item[nameKey] }}</div>
        <div class="tools">
          <n-icon
            :size="20"
            color="gray"
            :component="View"
            @click.stop="methods.viewFile(item)"
          ></n-icon>
          <n-icon
            v-if="showDownload"
            class="ml-2"
            :size="18"
            color="gray"
            :component="Download"
            @click.stop="methods.downloadFile(item)"
          ></n-icon>
          <n-icon
            v-if="showRemove"
            :size="22"
            color="gray"
            :component="CloseOutline"
            @click.stop="methods.removeFile(index)"
          ></n-icon>
        </div>
      </div>
    </template>
  </div>
</template>
<script setup lang="jsx">
import { Base64 } from 'js-base64'
import { saveAs } from 'file-saver'
import { useFileStore } from '@/store'
import { View } from '@vicons/carbon'
import { CloseOutline } from '@vicons/ionicons5'
import { Download } from '@vicons/tabler'
import docx from '@/assets/fileLogos/docx.png'
import txt from '@/assets/fileLogos/txt.png'
import png from '@/assets/fileLogos/png.png'
import jpg from '@/assets/fileLogos/jpg.png'
import pdf from '@/assets/fileLogos/pdf.png'
import mp3 from '@/assets/fileLogos/mp3.png'
import mp4 from '@/assets/fileLogos/mp4.png'
import pptx from '@/assets/fileLogos/pptx.png'
import xlsx from '@/assets/fileLogos/xlsx.png'
defineOptions({ name: 'FileList' })
const list = defineModel({ type: Array, default: () => [] })
const props = defineProps({
  showDownload: {
    type: Boolean,
    default: true,
  },
  showRemove: {
    type: Boolean,
    default: true,
  },
  color: {
    type: String,
    default: '#f3f5f8',
  },
  nameKey: {
    type: String,
    default: 'fileName',
  },
  urlKey: {
    type: String,
    default: 'fileUrl',
  },
})
const fileStore = useFileStore()
const logoEnum = {
  doc: docx,
  docx,
  png,
  txt,
  jpg,
  pdf,
  mp3,
  mp4,
  ppt: pptx,
  pptx,
  xls: xlsx,
  xlsx,
}
const methods = reactive({
  nameToLogo(name) {
    let suffix = name?.substring(name?.lastIndexOf('.') + 1)?.toLowerCase()
    return logoEnum[suffix] || ''
  },
  removeFile(index) {
    list.value.splice(index, 1)
  },
  async downloadFile(item) {
    const url = await fileStore.getUrl(item.fileName, item.fileUrl)
    saveAs(url)
  },
  async viewFile(item) {
    const url = await fileStore.getUrl(item.fileName, item.fileUrl)
    window.open(
      `${import.meta.env.VITE_PROXY_VIEW_URL}/onlinePreview?url=${encodeURIComponent(
        Base64.encode(url)
      )}`
    )
  },
})
</script>
<style lang="scss" scoped>
.file-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 8px;
  .file-item {
    display: flex;
    align-items: center;
    width: 240px;
    height: 48px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid v-bind('props.color');
    background: v-bind('props.color');
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    .tools {
      position: absolute;
      z-index: 10;
      right: 2px;
      top: 50%;
      transform: translateY(-50%);
      display: none;
      align-items: center;
      height: 100%;
      background: linear-gradient(to right, transparent, v-bind('props.color') 10%);
      gap: 4px;
      padding: 0 10px;
    }
    &:hover {
      .tools {
        display: flex;
      }
      border: 1px solid #0a56d8;
    }
    .file-logo {
      margin-right: 10px;
      flex-shrink: 0;
    }
    .file-name {
      font-weight: 400;
      font-size: 14px;
      color: #030912;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
